<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>search</title>
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="css/public.css">
    <script src="js/rem.js"></script>
</head>

<body>
    <div id="app">

        <div class="top">
            <a href="index.html" class="back_ico"></a>
            <i class="search_ico"></i><input type="text" placeholder="请在此输入" class="search" v-model="searchData">
            <input type="button" value="搜索" class="search_btn" @click="search">
        </div>
        <div class="history">
            <div style="overflow:hidden">
                <h3 class="title">历史纪录</h3>
                <div class="del" @click="del"></div>
            </div>
            <ul>
                <li v-for="(item, index) in hisData" :key="index" @click="hisSearch">{{item}}</li>
            </ul>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <script src="js/data.js"></script>
    <script>
        var Vm = new Vue({
            el: "#app",
            data: {
                url: "http://apis.juhe.cn/cook/query.php",
                key: "f25836940c8c65d4021f569c21e8e1dd",
                searchData: "",
                hisData: []
            },
            created() {
                // this.upData()  
            },
            mounted() {
                this.upData()
            },
            methods: {
                //点击搜索按钮
                search: function () {
                    // this.$http.jsonp(this.url + '?key=' + this.key + '&menu=' + this.searchData).then(
                    //     function (res) {
                    //         var retData = res.body.result.data;
                    //         console.log(retData);
                            


                    //     })

                    location.href = "resultSearch.html?menu=" + this.searchData

                    if (!localStorage.getItem("hisData")) {
                        localStorage.setItem("hisData", JSON.stringify(this.hisData))
                    } else {
                        this.hisData = JSON.parse(localStorage.getItem("hisData"))
                        var text = this.searchData;
                        this.hisData.push(text)
                        console.log(this.hisData);
                        localStorage.setItem("hisData", JSON.stringify(this.hisData))
                    }


                },
                upData: function () {
                    //  localStorage.clear()
                    if (localStorage.getItem("hisData")) {
                        this.hisData = JSON.parse(localStorage.getItem("hisData"));

                    }

                },
                del: function () {
                    localStorage.clear("hisData")
                },
                hisSearch: function () {
                    localStorage.clear("hisData")
                }
            },

        })
    </script>

</body>

</html>